<template>
    <map id="map1"
         :longitude="longitude"
         :latitude="latitude"
         :markers="markers"
         :scale="scale"
         :polyline="polyline"
         style="height: 100vh;width: 100vw"
    />
</template>

<script>
import {mapKey} from "@/service/map";
import {dayTrace} from "@/service/api/signin";
const marker = JSON.stringify({
    id: 1,//标记点id,Number类型，必填
    latitude: '',//纬度，必填
    longitude:'',//经度，必填
    title:'',//标注点名
    width:32,//标注图标宽度，Number类型
    height:32,//标注图标高度，Number类型
    iconPath:'http://121.41.75.32:8002/file/static/coordinate.png',//显示的图标，必填
    // rotate:0,//旋转角度,顺时针旋转的角度，范围 0 ~ 360，默认为 0
    // alpha:1,//标注的透明度,默认1，无透明，范围 0 ~ 1
    label:{
        content:'',
        color:'#ff0000',//文本颜色
        fontSize:12,//文字大小
        // borderWidth:30,//边框宽度
        // borderColor:'',//边框颜色
        // borderRadius:3,//边框圆角
        // bgColor:"#31c27c",//背景色
        padding:3,//文本边缘留白
        textAlign:"center",//文本对齐方式。有效值: left, right, center
    },//为标记点旁边增加标签
    // anchor:{},//经纬度在标注图标的锚点，默认底边中点,{x, y}，x表示横向(0-1)，y表示竖向(0-1)。{x: .5, y: 1} 表示底边中点
    //clusterId:1,//自定义点聚合簇效果时使用
    // customCallout:{},//自定义气泡窗口
    // aria-label:'',//无障碍访问，（属性）元素的额外描述
    joinCluster:true,//是否参与点聚合,此选项值必须设置为true,才会生效
    callout:{//自定义标记点上方的气泡窗口
        content: '',//文本
        color:"#000000",//文本颜色
        fontSize:8,//文字大小
        borderRadius:3,//callout边框圆角
        borderWidth:2,//边框宽度
        borderColor:'',//边框颜色
        bgColor:"#ffffff",//背景色
        padding:3,//文本边缘留白
        display:"ALWAYS",//'BYCLICK':点击显示; 'ALWAYS':常显
        textAlign:"center",//文本对齐方式。有效值: left, right, center
    },

})

export default {
    props: {
        points: {
            type: Array,
            default() {
                return [
                    {
                        latitude: 28.673054274119274,
                        longitude: 121.41238678906248,
                        speed: 6.4352341234, //speed m/s
                    },
                    {
                        latitude: 28.669590166833125,
                        longitude: 121.42427433941648,
                        speed: 6.4352341234, //speed m/s
                    },
                    {
                        latitude: 28.66974078257488,
                        longitude: 121.44422997448729,
                        speed: 6.4352341234, //speed m/s
                    }
                ]
            }
        },
    },
    onLoad(option){
        this.onGet(JSON.parse(option.date))
    },
    data() {
        return {
            numList:['①','②','③','④','⑤','⑥','⑦','⑧','⑨','⑩','⑪','⑫','⑬','⑭','⑮','⑯','⑰','⑱','⑲','⑳','㉑','㉒','㉓','㉔','㉕','㉖','㉗','㉘','㉙','㉚','㉛','㉜','㉝','㉞','㉟','㊱','㊲','㊳','㊴','㊵'],
            map:null,
            maxSpeed: null, // 最快速度的点
            scale:12, // 地图缩放比例
            markers: [
            ], // 标记点集合
            polyline: [{
                points: [],
            },], // 坐标点集合

            latitude: 28.626957214709098,
            longitude: 121.5028523347167,

            centerPoint: {
                latitude: 0,
                longitude: 0
            }, // 中间点
            timeType:{
                location: {
                    prop:'signInTime',
                    label:'签到'
                },
                signOutLocation:{
                    prop:'signOutTime',
                    label:'签退'
                },
            }
        }
    },
    watch: {
        points(e) {
        },
    },
    mounted() {
        this.map = wx.createMapContext('map1',this)
    },
    created: function () {
    },
    methods: {
        onGet(query){
            dayTrace(query).then(res=>{
                if (res.status === 200){
                    let markerList = []
                    res.data.forEach((item,index)=>{
                        const signMark = this.setMark(item,'location',index)
                        signMark && markerList.push(signMark)
                        // const signOutMark = this.setMark(item,'signOutLocation',index)
                        // signOutMark && markerList.push(signOutMark)
                    })
                    //设置坐标点
                    this.markers = markerList
                    const center = this.markers[0]
                    if (center){
                        this.longitude = center.longitude
                        this.latitude = center.latitude
                    }
                    //设置中心点
                    const locationList = markerList.map(item=>{
                        return {
                            longitude:item.longitude,
                            latitude:item.latitude
                        }
                    })
                    this.polyline = [{
                        points:locationList,
                        color: '#58c16c',
                        width: 6,
                        borderColor: '#2f693c',
                        borderWidth: 1,
                        arrowLine:true
                    }]
                }

            })
        },
        setMark(val,type,index){
            if(!/^\d+\.\d+,\d+\.\d+$/.test(val[type]))return false

            const [longitude,latitude] = val[type].split(',')
            const copyMark = JSON.parse(marker)
            copyMark.id = index
            copyMark.latitude = Number(latitude)
            copyMark.longitude = Number(longitude)
            copyMark.label.content = val.customerName

            const intervalTime = val.visitDuration >> 0
            const time = val[this.timeType[type].prop].match(/\d{4}-\d{2}-\d{2}\s+\d{2}:\d{2}/)

            copyMark.callout.content = `${this.numList[index]}${this.timeType[type].label}时间\n${time[0] || val[this.timeType[type].prop]}\n时长${intervalTime}分钟`

            return copyMark
        }
    },
}
</script>
<style scoped>

</style>
